<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong> {{list.length}} </strong></span>
    <ul @click="changeTask" class="filters">
      <li>
        <a @click="isOk = 'all'" :class="{selected:isOk=='all'}" href="javascript:;">全部</a>
      </li>
      <li>
        <a @click="isOk = 'no'" :class="{selected:isOk=='no'}" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="isOk = 'yes'" :class="{selected:isOk=='yes'}" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearYes">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["list"],
  data() {
      return {
          isOk:'all'
      }
  },
  methods:{
      changeTask(){
          this.$emit('changeTask',this.isOk)
      },
      clearYes(){
          this.$emit('clearYes')
      }
  }
};
</script>